<template>
  <div class="informationEcharts" ref="information"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'information',
  mounted() {
    this.getEchart()
  },
  methods: {
    getEchart() {
      let chartDom = this.$refs.information
      let myChart = echarts.init(chartDom)
      let option

      const res = [{
        'label': '在线',
        'value': 370
      },
        {
          'label': '离线',
          'value': 263
        }
      ]

      const border =
        ''

      const color = ['#00FFFF', 'rgba(196,36,255,1)']
      const data = []
      for (let i = 0; i < res.length; i++) {
        data.push({
          value: res[i].value,
          name: res[i].label,
          itemStyle: {
            normal: {
              borderWidth: 1,
              shadowBlur: 20,
              borderColor: color[i],
              shadowColor: color[i]
            }
          }
        }, {
          value: res[0].value / 10,
          name: '',
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              color: 'rgba(0, 0, 0, 0)',
              borderColor: 'rgba(0, 0, 0, 0)',
              borderWidth: 0
            }
          }
        })
      }
      option = {
        color,
        title: {
          text: '通讯网关',
          x: 'center',
          y: '43%',
          textStyle: {
            fontSize: 12,
            fontWeight: 'normal',
            color: '#fff'
          }
        },
        graphic: {
          elements: [
            {
              type: 'image',
              z: 3,
              style: {
                image: border,
                width: 80,
                height: 80
              },
              left: 'center',
              top: 'center',
              // position: [100, 100]
            }
          ]
        },
        tooltip: {
          show: false
        },
        toolbox: {
          show: false
        },
        series: [{
          name: '',
          type: 'pie',
          clockWise: false,
          radius: [50, 60],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: true,
                fontSize: 12,
                formatter(params) {
                  return params.name ?
                    `${params.name}${params.value}` : ''
                }
              },
              labelLine: {
                width: 4,
                length: 5,
                length2: 5,
                show: true,
                color: '#00ffff'
              }
            }
          },
          data
        }]
      }

      option && myChart.setOption(option)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.informationEcharts {
  width: 255px;
  height: 160px;
  margin-top: 10px;
  display: inline-block;
}
</style>
